<template>
  <div class="add">
    <div>
      <!-- 新增考勤组 -->
      <div>
        <el-page-header @back="back" title="考勤配置" ref="a"> </el-page-header>
      </div>
      <div>
        <!-- 考勤组名称 -->
        <div style="padding-bottom: 15px">
          <span
            style="display: block width: 70px;
            font-size: 14px;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
            height: 30px;
            color: #13213B;"
            >考勤组名称</span
          >
          <el-input
            type="text"
            placeholder="请输入考勤组名称"
            v-model="text"
            maxlength="15"
            show-word-limit
            class="Att"
          />
        </div>
        <!-- 考勤组人员设置 -->
        <!-- <div class="add-item">
          <span>考勤组人员</span>
          <span class="setting" @click="set()">设置</span>
          <p>参与考勤人员：未设置</p>
        </div> -->
        <!-- 考勤时间设置 -->
        <div class="add-item">
          <span>考勤时间</span>
          <span class="setting" @click="setTime">设置</span>
          <p>考勤类型：固定班至(固定时间打卡)</p>
          <p>
            工作日设置：<span
              v-for="(item, index) in multipleSelection"
              :key="index"
            >
              {{ item.day }}</span
            >
          </p>
        </div>
        <!-- 打卡范围设置 -->
        <div class="add-item">
          <span>打卡范围</span>
          <span class="setting" @click="punch = true">设置</span>
          <p>考勤方式：地点打卡</p>
          <p>
            打卡地点：
            <span v-for="item in punchTableData" :key="item.id">
              {{ item.schoolName }}
            </span>
          </p>
        </div>
        <button class="setting-set" @click="save">保存设置</button>
      </div>

      <div class="Attendanceplace">
        <!--  右侧抽屉-->
        <div style="text-align: left; padding: 0 20px 0 20px">
          <!-- 考勤人员   :before-close="handleClose" -->
          <!-- <el-drawer
            title="考勤人员"
            :visible.sync="people"
            :direction="direction"
            show-close
          >
            <div
              style="
                width: 600px;
                height: 0px;
                opacity: 1;
                border: 1px solid #c4c4cf;
                margin-bottom: 20px;
              "
            ></div>
            <p>参与考勤人员({{ arr.length }})</p>
            <el-select
              style="width: 100%"
              v-model="value"
              @focus="selectPeople"
              clearable
              placeholder="未设置"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <div v-for="(item, index) in arr" :key="index">
              {{ item.label }}
            </div>
            <div class="bottom">
              <p>
                <button class="cancel" @click="people = false">取消</button>
                <button class="confifrm" @click="people = false">
                  确定
                </button>
              </p>
            </div>
          </el-drawer> -->
          <!-- 考勤时间 :before-close="handleClose" -->
          <el-drawer
            ref="b"
            title="考勤时间"
            :visible.sync="time"
            :direction="direction"
            show-close
            class="center"
          >
            <div
              style="
                width: 600px;
                height: 0px;
                opacity: 1;
                border: 1px solid #c4c4cf;
                margin-bottom: 20px;
              "
            ></div>
            <div>
              <p>工作日设置</p>
              <p>
                <span style="font-size: 12px"
                  >快捷设置班次：{{ shift.name }}
                  <span v-for="(item, index) in shift.shiftTime" :key="index">
                    {{ item.begin }} - {{ item.end }}
                  </span>
                </span>
                <el-button
                  @click="changeTimeClickAll()"
                  type="text"
                  size="small"
                  style="
                    font-size: 14px;
                    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                    font-weight: 400;
                    color: #126bff;
                    position: relative;
                    left: 93px;
                  "
                  >更改班次</el-button
                >
              </p>
              <div>
                <el-table
                  ref="multipleTable"
                  :data="tableData"
                  @selection-change="handleSelectionChange"
                  :default-selection="[tableData[1]]"
                  style="
                    width: 100%;
                    border: 1px #d7dbe3 solid;
                    border-radius: 8px;
                  "
                  :header-cell-style="{ background: '#ECF5FF' }"
                  header-row-class-name="tableHeaderRowClassName"
                >
                  <el-table-column type="selection"> </el-table-column>
                  <el-table-column
                    style="text-align: center"
                    prop="day"
                    label="工作日"
                  >
                  </el-table-column>
                  <!-- <el-table-column
                    style="text-align: center"
                    prop="shiftTime"
                    label="班次"
                  >
                  </el-table-column> -->
                  <el-table-column
                    style="text-align: center"
                    prop="shift_name"
                    label="班次名称"
                  >
                  </el-table-column>
                  <el-table-column
                    style="text-align: center"
                    prop="shift_time"
                    label="班次时间"
                    width="180"
                  >
                    <template slot-scope="scope">
                      <span v-for="item in scope.row.shift_time" :key="item.id">
                        {{ item.begin }} - {{ item.end }} ||
                      </span>
                    </template>
                  </el-table-column>
                  <el-table-column style="text-align: center" label="操作">
                    <template slot-scope="scope">
                      <el-button
                        @click="changeTimeClick(scope.row)"
                        type="text"
                        size="small"
                        style="
                          font-size: 14px;
                          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                          font-weight: 400;
                          color: #126bff;
                        "
                        >更改班次</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
                <p style="margin-top: 10px">
                  <el-checkbox v-model="checked"
                    >法定节假日自动排休</el-checkbox
                  >
                </p>
              </div>
            </div>
            <div class="bottom">
              <p>
                <el-button
                  @click="cancelTime"
                  style="
                    background-color: #e6effa;
                    color: #126bff;
                    margin-left: 10px;
                    height: 36px;
                    width: 78px;
                    border-radius: 6px;
                    opacity: 1;
                    font-size: 14px;
                    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                    font-weight: 400;
                  "
                  >取消</el-button
                >
                <el-button
                  style="
                    height: 36px;
                    width: 78px;
                    background-color: #126bff;
                    border-radius: 6px;
                    opacity: 1;
                    color: #ffffff;
                    font-size: 14px;
                    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                    font-weight: 400;
                    margin-left: 10px;
                  "
                  @click="addConfirmTime"
                >
                  确定
                </el-button>
              </p>
            </div>
          </el-drawer>
          <!-- 打卡范围  :before-close="handleClose" -->
          <el-drawer
            title="打卡范围"
            :visible.sync="punch"
            :direction="direction"
            show-close
            width="40%"
          >
            <div
              style="
                width: 600px;
                height: 0px;
                opacity: 1;
                border: 1px solid #c4c4cf;
                margin-bottom: 20px;
              "
            ></div>
            <!-- 打卡范围主体 -->
            <div>
              <div class="Attendanceplace-public">
                <p>考勤方式</p>
                <p>地点打卡</p>
              </div>
              <div class="Attendanceplace-public">
                <p>
                  <button
                    style="
                      width: 60px;
                      height: 32px;
                      margin: 5px;
                      background: #ffffff;
                      border-radius: 6px 6px 6px 6px;
                      opacity: 1;
                      border: 1px solid #126bff;
                      color: #126bff;
                    "
                    @click="addAddress"
                  >
                    添加
                  </button>
                  <span>可添加多个打卡地点</span>
                </p>
                <el-table
                  :data="punchTableData"
                  @selection-change="handleSelectionChange"
                  style="
                    width: 100%;
                    border: 1px #d7dbe3 solid;
                    border-radius: 8px;
                  "
                  :header-cell-style="{ background: '#ECF5FF' }"
                >
                  <el-table-column
                    style="text-align: center"
                    prop="schoolName"
                    label="地点名称"
                  >
                  </el-table-column>
                  <el-table-column
                    style="text-align: center"
                    prop="schoolName"
                    label="考勤地址"
                  >
                  </el-table-column>
                  <el-table-column
                    style="text-align: center"
                    prop="distance"
                    label="有效范围"
                  >
                    <template slot-scope="scope">
                      <el-select
                        v-model="scope.row.distance"
                        placeholder="请选择"
                      >
                        <template name="item">
                          <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label + ' 米'"
                            :value="item.value"
                          >
                          </el-option>
                        </template>
                      </el-select>
                    </template>
                  </el-table-column>
                  <el-table-column style="text-align: center" label="操作">
                    <template slot-scope="scope">
                      <el-button
                        @click="deleteTimeClick(scope.row)"
                        type="text"
                        size="small"
                        style="
                          font-size: 14px;
                          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                          font-weight: 400;
                          color: red;
                        "
                        >删除</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <div class="bottom">
              <p>
                <button id="reset" @click="punch = false">取消</button>
                <button id="submitForm" @click="addPunchAddress">确定11</button>
              </p>
            </div>
          </el-drawer>
        </div>
        <!-- 二级弹窗 -->
        <div>
          <!-- 设置班次时间 :before-close="handleClose" -->
          <el-dialog title="选择班次" :visible.sync="timeVisible" width="40%">
            <div class="selectTime">
              <p>
                <el-input
                  placeholder="请输入班次名称"
                  v-model="inputShift"
                  style="
                    width: 270px;
                    height: 34px;
                    border-radius: 8px 8px 8px 8px;
                    opacity: 1;
                    border: 1px solid #d7dbe3;
                    float: left;
                    margin: 10px 0 10px 0;
                  "
                  @input="searchName"
                >
                  <i slot="prefix" class="el-input__icon el-icon-search"></i>
                </el-input>
              </p>
              <div>
                <el-table
                  :data="timeData"
                  style="
                    width: 100%;
                    border: 1px #d7dbe3 solid;
                    border-radius: 8px;
                  "
                >
                  <el-table-column width="50">
                    <template slot-scope="scope">
                      <!-- 可以手动的修改label的值，从而控制选择哪一项 -->
                      <el-radio
                        class="radio"
                        v-model="templateSelection"
                        :label="scope.row"
                        @input="handleSelectionTimeData(scope.row)"
                        >&nbsp;</el-radio
                      >
                    </template>
                  </el-table-column>
                  <el-table-column
                    style="text-align: center; color: red"
                    prop="name"
                    label="班次名称"
                    width="100"
                    id="banji"
                  >
                  </el-table-column>
                  <el-table-column
                    style="text-align: center"
                    prop="shiftTime"
                    label="考勤时间"
                  >
                    <template scope="row">
                      <span
                        v-for="(item, index) in row.row.time"
                        :key="index"
                        style="margin-right: 5px"
                        >{{ item.begin }} -{{ item.end }}</span
                      >
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <span slot="footer" class="dialog-footer">
              <el-button
                @click="timeVisible = false"
                style="
                  background-color: #e6effa;
                  color: #126bff;
                  margin-left: 10px;
                  height: 36px;
                  width: 78px;
                  border-radius: 6px;
                  opacity: 1;
                  font-size: 14px;
                  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                  font-weight: 400;
                "
                >取 消</el-button
              >
              <el-button
                type="primary"
                @click="confirmSelectBanci"
                style="
                  height: 36px;
                  width: 78px;
                  background-color: #126bff;
                  border-radius: 6px;
                  opacity: 1;
                  color: #ffffff;
                  font-size: 14px;
                  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                  font-weight: 400;
                  margin-left: 10px;
                "
                >确 定</el-button
              >
            </span>
          </el-dialog>
          <!-- 添加打卡地点  :before-close="handleClose" -->
          <el-dialog
            title="添加考勤地点"
            :visible.sync="dialogAddressVisible"
            width="auto"
          >
            <div>
              <MapContainer
                :selectAddress="selectAddress"
                @address="address"
                ref="map"
              />
            </div>
            <span slot="footer" class="dialog-footer">
              <el-button
                @click="handleCancel"
                style="
                  background-color: #e6effa;
                  color: #126bff;
                  margin-left: 10px;
                  height: 36px;
                  width: 78px;
                  border-radius: 6px;
                  opacity: 1;
                  font-size: 14px;
                  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                  font-weight: 400;
                "
                >取消</el-button
              >
              <el-button
                type="primary"
                @click="success"
                style="
                  height: 36px;
                  width: 78px;

                  background-color: #126bff;
                  border-radius: 6px;
                  opacity: 1;
                  color: #ffffff;
                  font-size: 14px;
                  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                  font-weight: 400;
                  margin-left: 10px;
                "
                >确定22</el-button
              >
            </span>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import MapContainer from "@/components/Map/index";
import {
  shiftList,
  addCheckIn,
  updateCheckIn,
  checkInDetail,
} from "@/api/CheckAttendance";
function getDayOfWeek(dayNumber) {
  let day;
  switch (dayNumber) {
    case 1:
      day = "星期一";
      break;
    case 2:
      day = "星期二";
      break;
    case 3:
      day = "星期三";
      break;
    case 4:
      day = "星期四";
      break;
    case 5:
      day = "星期五";
      break;
    case 6:
      day = "星期六";
      break;
    case 7:
      day = "星期日";
      break;
    default:
      day = "无效的日期";
  }
  return day;
}
function getWeekOfDay(week) {
  let day;
  switch (week) {
    case "星期一":
      day = 1;
      break;
    case "星期二":
      day = 2;
      break;
    case "星期三":
      day = 3;
      break;
    case "星期四":
      day = 4;
      break;
    case "星期五":
      day = 5;
      break;
    case "星期六":
      day = 6;
      break;
    case "星期日":
      day = 7;
      break;
    default:
      day = "无效的日期";
  }
  return day;
}
export default {
  name: "APP",
  components: { MapContainer },
  data() {
    return {
      people: false,
      time: false,
      punch: false,
      dialogVisible: false,
      timeVisible: false,
      checked: false,
      dialogAddressVisible: false,
      all: true,
      direction: "rtl",
      text: "",
      options: [
        {
          value: "300",
          label: "300",
        },
        {
          value: "500",
          label: "500",
        },
      ],
      value: "",
      multipleSelection: [],
      // value: [1],
      value4: [],
      arr: [],
      gloub: [],
      renderFunc(h, option) {
        return (
          <span>
            {option.key} - {option.label}
          </span>
        );
      },
      shift: {
        id: 1,
        name: "测试班次2",
        shiftTime: [
          {
            begin: "10:00",
            end: "11:00",
          },
        ],
      }, // 班次

      week: [
        {
          type: 1,
          shift_id: 1, // 如果没有的话  id为0
        },
        {
          type: 2,
          shift_id: 1,
        },
        {
          type: 3,
          shift_id: 1,
        },
        {
          type: 4,
          shift_id: 1,
        },
        {
          type: 5,
          shift_id: 1,
        },
        {
          type: 6,
          shift_id: 1,
        },
        {
          type: 7,
          shift_id: 1,
        },
      ],
      tableData: [
        {
          day: getDayOfWeek(1),
          id: 1,
          shift_id: "",
          // shiftTime: "班次 测试班次: 09:00-18:00",
          name: "",
          time: [
            // {
            //   begin: "10:00",
            //   end: "11:00",
            // },
          ],
        },
        {
          day: getDayOfWeek(2),
          id: 2,
          shift_id: "",
          // shiftTime: "班次 测试班次: 09:00-18:00",
          name: "",
          time: [
            // {
            //   begin: "10:00",
            //   end: "11:00",
            // },
          ],
        },
        {
          day: getDayOfWeek(3),
          id: 3,
          shift_id: "",
          // shiftTime: "班次 测试班次1: 09:00-18:00",
          name: "",
          time: [
            // {
            //   begin: "10:00",
            //   end: "11:00",
            // },
          ],
        },
        {
          day: getDayOfWeek(4),
          id: 4,
          shift_id: "",
          // shiftTime: "班次 测试班次1: 09:00-18:00",
          name: "",
          time: [
            // {
            //   begin: "10:00",
            //   end: "11:00",
            // },
          ],
        },
        {
          day: getDayOfWeek(5),
          // shiftTime: "班次 测试班次: 09:00-18:00",
          id: 5,
          shift_id: "",
          name: "",
          time: [
            // {
            //   begin: "10:00",
            //   end: "11:00",
            // },
          ],
        },
        {
          day: getDayOfWeek(6),
          // shiftTime: "班次 默认: 09:00-18:00",
          shift_id: "",
          id: 6,
          name: "",
          time: [
            // {
            //   begin: "10:00",
            //   end: "11:00",
            // },
          ],
        },
        {
          day: getDayOfWeek(7),
          // shiftTime: "班次 测试班次2: 09:00-18:00",
          shift_id: "",
          name: "",
          id: 7,
          time: [
            // {
            //   begin: "10:00",
            //   end: "11:00",
            // },
          ],
        },
      ],
      punchTableData: [
        // {
        //   id: 1,
        //   schoolName: "第三小学",
        //   attendanceAddress: "第三小学",
        //   distance: 300,
        // },
        // {
        //   id: 2,
        //   schoolName: "第三小学",
        //   attendanceAddress: "第三小学",
        //   distance: 300,
        // },
        // {
        //   id: 3,
        //   schoolName: "第三小学",
        //   attendanceAddress: "第三小学",
        //   distance: 300,
        // },
      ],
      inputShift: "", // 更改班次搜索班次名称
      timeData: [],
      templateSelection: "", // 班次考勤时间选择
      checkList: [], // 当前选择的行的数据
      changeBanci: "", // 当前选择的班次
      // =====考勤地点数组存放
      placeList: [],
      punchAddress: "",
      formData: {
        // 查询条件
        name: "",
        ywlsh: JSON.parse(localStorage.getItem("userInfo")).user.ywlsh,
        page: 1,
        pagesize: 10,
      },
      kaoqinInfo: {
        token: JSON.parse(localStorage.getItem("userInfo")).token,
        ywlsh: 2742,
        name: "夏季护学岗时间",
        week: [
          {
            day: 1,
            shift_id: 1, // 如果休息的话  id为0
          },
          {
            day: 2,
            shift_id: 1,
          },
          {
            day: 3,
            shift_id: 1,
          },
          {
            day: 4,
            shift_id: 1,
          },
          {
            day: 5,
            shift_id: 1,
          },
          {
            day: 6,
            shift_id: 0,
          },
          {
            day: 7,
            shift_id: 0,
          },
        ],
        address: [
          {
            name: "地点1",
            location: "116.395919,39.987559",
          },
        ],
        shiftName: [],
      },
    };
  },
  mounted() {
    console.log("897897987");
    this.init();
  },
  created() {
    console.log("dasda");
  },
  methods: {
    // init初始化数据
    init() {
      let that = this;
      checkInDetail({
        token: JSON.parse(localStorage.getItem("userInfo")).token,
        id: this.$route.query.id,
      }).then((res) => {
        if (res.code == 200) {
          console.log(res.data);
          res.data.forEach((item) => {
            item.day = getDayOfWeek(item.day);
          });
          this.shiftName = res.data;
          console.log(Object.keys(this.$route.query).length === 0);
          if (Object.keys(this.$route.query).length !== 0) {
            console.log(this.$route.query);
            this.text = this.$route.query.name;
            this.$route.query.time.forEach((item, index) => {
              if (item.shift_id != 0) {
                this.multipleSelection.push({
                  day: item.day,
                  name: item.name,
                  shift_id: item.shift_id,
                });
              }
              console.log(this.shiftName[index].shift_name);
              console.log(item.time);
              this.tableData = this.shiftName;
              // this.tableData[index].name = this.shiftName[index].shift_name;
              // this.tableData[index].time = this.shiftName[index].shift_name;
              // if (this.shiftName[index].shift_time.length > 0) {
              //   this.shiftName[index].shift_time.forEach((items, indexs) => {
              //     this.tableData[index].time +=
              //       " " + items.begin + "-" + items.end;
              //   });
              // }
            });

            this.$route.query.address.forEach((item) => {
              console.log(item);
              this.punchTableData.push({
                schoolName: item.name,
                distance: item.distance,
                location: item.location,
              });
            });
          }
        }
      });
    },
    searchName() {
      this.formData.name = this.inputShift;
      shiftList(this.formData).then((res) => {
        if (res.code == 200) {
          console.log(res.data.res);
          this.timeData = res.data.res;
        } else if (res.code == 400) {
          this.tableData = [];
          this.$message({
            message: res.message,
            type: "warning",
            duration: "2000",
          });
        }
      });
    },
    // 设置考勤时间
    setTime() {
      let that = this;
      that.time = true;
      console.log(that.multipleSelection);
      for (let i = 0; i < that.tableData.length; i++) {
        for (let j = 0; j < that.multipleSelection.length; j++) {
          if (that.tableData[i].day === that.multipleSelection[j].day) {
            // console.log(
            // `a中包含b的项：${that.tableData[i].day}，在b中的index为：${j}`
            that.$nextTick(() => {
              that.$refs.multipleTable.toggleRowSelection(that.tableData[j]);
            });
            // );
          }
        }
      }
      shiftList(this.formData).then((res) => {
        if (res.code == 200) {
          console.log(res.data.res);
          this.timeData = res.data.res;
        } else if (res.code == 400) {
          this.tableData = [];
          this.$message({
            message: res.message,
            type: "warning",
            duration: "2000",
          });
        }
      });
    },
    // 更改所有班次
    changeTimeClickAll() {
      console.log(this.tableData);
      this.all = true;
      this.timeVisible = true;
    },
    // 一、 更改班次 选择当前行
    changeTimeClick(row) {
      console.log(row);
      this.all = false;
      this.changeBanci = row; // 设置 changeBanci 为中间值  当前值赋值给 changeBanci
      this.timeVisible = true;
    },
    // 确定选择班次 （星期几）
    addConfirmTime() {
      this.time = false;
      console.log(this.multipleSelection);
    },
    // 取消选择班次 （星期几）
    cancelTime() {
      this.time = false;
      this.multipleSelection = [];
    },
    // 二、 选择班次考勤时间  选择班次弹窗
    handleSelectionTimeData(row) {
      this.templateSelection = row; // 选择当前班次 设置 templateSelection 为中间值  当前值赋值给 templateSelection
      console.log(this.templateSelection);
    },
    // 三、 确认选择班次 遍历赋值 判断选择是周几得班次  进行赋值
    confirmSelectBanci() {
      let that = this;
      // console.log(that.multipleSelection);
      console.log(that.templateSelection);
      if (this.all) {
        console.log();
        this.shift.name = this.templateSelection.name;
        this.shift.shiftTime = this.templateSelection.time;
        this.tableData.forEach((item) => {
          console.log(item);
          item.shift_time = this.templateSelection.time;
          // console.log(this.templateSelection.name);
          item.shift_name = this.templateSelection.name;
          // item.shift_name = this.templateSelection.shift_name;
        });
      }
      // else {
      //   that.tableData.forEach((item, index) => {
      //     if (that.changeBanci.id == item.id) {
      //       item.name = that.templateSelection.name;
      //       item.time = that.templateSelection.time;
      //       item.shift_id = that.templateSelection.id;
      //     }
      //   });
      // }
      // this.timeVisible = false;
    },
    // 返回上一级
    back() {
      this.$router.go(-1);
    },
    // 关闭弹窗
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
    // 调出抽屉
    set() {
      this.people = true;
    },
    selectPeople() {
      this.dialogVisible = true;
      console.log("222");
    },
    findItem(arr, key, val) {
      // console.log(arr, key, val);
      for (let i = 0; i < arr.length; i++) {
        if (arr[i][key] == val) {
          // console.log(arr[i]);
          return arr[i];
        }
      }
      return -1;
    },
    handleCancel() {
      this.dialogAddressVisible = false;
      // if (this.$refs.map.form.attendanceAddress != "") {
      // this.punchTableData.push(this.$refs.map.form);
      this.$refs.map.form = {
        lng: "",
        lat: "",
        attendanceAddress: "",
        distance: "300",
        schoolName: "",
      };
      this.$refs.map.searchAddress = "";
      this.$refs.map.removeMarker();
      this.$refs.map.initAMap();

      console.log(this.$refs.map.form);
      // }
    },
    selectAddress(val) {
      console.log(val);
    },
    address(val) {
      console.log(val);
      this.punchAddress = val;
    },
    // 添加考勤地点
    success() {
      console.log(this.punchAddress);
      this.punchTableData.push({
        schoolName: this.punchAddress.name,
        attendanceAddress: this.punchAddress.address,
        distance: "300",
        lng: this.punchAddress.location.lng,
        lat: this.punchAddress.location.lat,
      });
      this.dialogVisible = false;
      this.dialogAddressVisible = false;
    },
    deleteTimeClick(row) {
      console.log(row);
      this.punchTableData.splice(this.punchTableData.indexOf(row), 1);
    },

    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    // 调起更改班次考勤时间弹窗
    handleSelectionChange(val) {
      console.log(val);
      // this.templateSelection = val;
      this.multipleSelection = val;
    },

    // 添加打卡地点
    addAddress() {
      this.dialogAddressVisible = true;
    },
    // 确认添加考勤地点
    addPunchAddress() {
      this.punch = false;
      this.punchTableData.forEach((item) => {
        console.log(item);
      });
    },
    // 处理每天的打卡时间
    formateDay() {
      let weeks = [];
      this.tableData.forEach((item, index) => {
        if (this.multipleSelection[index]) {
          weeks.push({
            shift_id: this.multipleSelection[index].shift_id,
            day: getWeekOfDay(this.multipleSelection[index].day),
          });
        } else {
          weeks.push({
            shift_id: 0,
            day: getWeekOfDay(item.day),
          });
        }
      });
      // this.multipleSelection.forEach((item) => {
      //   console.log(item);
      //   weeks.push({
      //     shift_id: item.shift_id,
      //     day: getWeekOfDay(item.day),
      //   });
      // });
      return weeks;
    },
    // 方法 用来区分编辑还是新曾

    // 保存配置
    save() {
      let add = [];
      if (this.text == "") {
        this.$message.warning("考勤组名称不能为空");
        return;
      } else if (this.multipleSelection.length == 0) {
        this.$message.warning("考勤时间不能为空");
      } else if (this.punchTableData.length == 0) {
        this.$message.warning("打卡地点不能为空");
      }
      console.log(this.punchTableData);
      console.log(Object.keys(this.$route.query).length);
      if (Object.keys(this.$route.query).length == 0) {
        this.punchTableData.forEach((item) => {
          console.log(item);
          add.push({
            name: item.schoolName,
            location: JSON.stringify(item.lng) + "," + JSON.stringify(item.lat),
            distance: item.distance,
          });
        });
        let info = {
          token: JSON.parse(localStorage.getItem("userInfo")).token,
          ywlsh: JSON.parse(localStorage.getItem("userInfo")).user.ywlsh,
          name: this.text,
          week: this.formateDay(),
          address: add,
        };
        console.log(this.text); // 考勤组名称
        console.log(this.multipleSelection); // 考勤组时间
        console.log(this.punchTableData); // 打卡范围地点
        console.log(info);
        addCheckIn(info).then((res) => {
          if (res.code == 200) {
            this.$message.success(res.message);
            this.$router.back();
          } else if (res.code == 400) {
            this.$message.error(res.message);
          }
          console.log(res);
        });
      } else {
        this.punchTableData.forEach((item) => {
          console.log(item);
          if (item.location) {
            add.push({
              name: item.schoolName,
              // location: JSON.stringify(item.lng + "," + item.lat),
              location: item.location,
              distance: item.distance,
            });
          } else {
            add.push({
              name: item.schoolName,
              location: JSON.stringify(item.lng + "," + item.lat),
              distance: item.distance,
            });
          }
        });
        let info = {
          token: JSON.parse(localStorage.getItem("userInfo")).token,
          ywlsh: JSON.parse(localStorage.getItem("userInfo")).user.ywlsh,
          name: this.text,
          week: this.formateDay(),
          address: add,
          id: this.$route.query.id,
        };
        updateCheckIn(info).then((res) => {
          if (res.code == 200) {
            this.$message.success(res.message);
            this.$router.back();
          } else if (res.code == 400) {
            this.$message.error(res.message);
          }
          console.log(res);
        });
        console.log(info);
      }
    },
  },
};
</script>
<style lang="scss" scoped >
/deep/.tableHeaderRowClassName {
  background-color: red !important;
  color: #9a9aa4 !important; // 设置头部样式只有这里起了作用
  text-align: center !important;
  font-weight: 400;
}
/deep/.el-table__body-wrapper {
  // color: red !important;
  font-size: 14px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: #13213b !important;
}
/deep/.el-main {
  padding: 0;
  // border: 1px red solid !important;
}
// :not(.current-page) .el-main {
//   /* 添加其他样式 */
// }
/deep/.Att input {
  border: 1px #d7dbe3 solid !important;
  background-color: #ffffff !important;
  border-radius: 8px !important;
}
.add-item {
  padding: 5px;
}
.add-item > p {
  height: 16px;
  font-size: 12px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: #9a9aa4;
}
.add-item > span:nth-of-type(1) {
  padding-right: 14px;
  height: 19px;
  font-size: 14px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: #13213b;
}

.add {
  height: 100%;
  width: 100%;
  background-color: #ffffff;
}
.add > div > div:nth-of-type(2) {
  text-align: left;
  padding: 15px;
  height: 100%;
  display: flex;
  width: 500px;
  // border: 1px red solid;
  flex-direction: column;
  align-items: start;
}
.add > div > div:nth-of-type(2) > div:nth-of-type(1) {
  // box-sizing: border-box;
  height: 80px;
  display: flex;
  line-height: 40px;
  flex-direction: column;
  padding: 5px;
}
.add > div > div:nth-of-type(2) > div:nth-of-type(1) .el-input {
  width: 400px;
}
.add > div > div:nth-of-type(2) > div {
  width: 100%;
  height: 80px;
  // border: 1px red solid;
}
.setting {
  width: 28px;
  height: 19px;
  font-size: 14px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: #126bff;
  line-height: 0px;
}
.setting-set {
  width: 100px;
  height: 36px;
  background: #126bff;
  border-radius: 6px;
  opacity: 1;
  font-size: 14px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
  border: none;
}
/deep/.el-page-header {
  display: block;
  height: 40px !important;
  line-height: 40px !important;
  border: 1px #ffffff solid !important;
}
/deep/.el-drawer__header {
  text-align: left;
  // padding-bottom: 15px;
  // border-bottom: 1px #000000 solid;
  margin-bottom: 20px !important;
  color: #13213b;
  font-weight: 800;
}
.bottom {
  position: fixed;
  /* position: ABSOLUTE; */
  bottom: -7px;
  padding: 10px;
  // border: 1px red solid;
  overflow: auto;
  width: -webkit-fill-available;
}
.bottom p {
  // border: 1px red solid;
  float: right;
  position: relative;
}
.bottom button {
  margin: 10px;
}
.cancel {
  width: 78px;
  height: 40px;
  background: #eef5ff;
  border-radius: 8px 8px 8px 8px;
  opacity: 1;
  color: #126bff;
  border: none;
}
.confifrm {
  width: 78px;
  height: 40px;
  background: #126bff;
  border-radius: 8px 8px 8px 8px;
  color: #ffffff;
  opacity: 1;
  border: none;
}
/deep/.el-dialog {
  width: 625px !important;
  border-radius: 20px;
}
/deep/.el-dialog__header {
  text-align: left;
  width: 119px;
  height: 21px;
  font-size: 16px;
  font-family: Microsoft YaHei-Bold, Microsoft YaHei;
  font-weight: bold;
  color: #13213b;
}
/deep/.el-transfer {
  display: flex !important;
  align-items: center;
}
/deep/.el-drawer__body {
  padding-left: 20px;
  padding-right: 20px !important;
  overflow: visible;
}
/deep/.el-input--suffix .el-input__inner {
  background-color: #ffffff !important;
  // color: #c4c4cf !important;
  // color: #c4c4cf !important;
  border: 1px #d7dbe3 solid !important;
}
/deep/.el-select .el-input .el-select__caret {
  position: relative;
  // background: red;
  top: 0px !important;
}
.center /deep/.el-drawer__open .el-drawer.rtl {
  width: 35% !important;
}
/deep/.el-drawer.rtl {
  width: 35% !important;
}
/deep/.tableHeaderClassName {
  background-color: red !important;
}
/deep/.el-table th.el-table__cell {
  text-align: center !important;
}
.el-table--enable-row-transition .el-table__body td.el-table__cell {
  text-align: center;
}
// .el-table td.el-table__cell,
/deep/.el-table td.el-table__cell,
.el-table th.el-table__cell .is-leaf {
  text-align: center !important;
  // border: 1px red solid;
}
/deep/.el-input--prefix .el-input__inner {
  background-color: white !important;
}
.selectTime > p:nth-of-type(1) i {
  // border: 1px red solid;
}
.Attendanceplace-public {
  // border: 1px red solid;
  line-height: 30px;

  padding-bottom: 15px;
}

/deep/.el-input--suffix .el-input__inner {
  padding-right: 5px;
}
</style>
